window.addEventListener('load', function() {




    var arrow_l = document.querySelector('.arrow-l ');
    var arrow_r = document.querySelector('.arrow-r ');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;

    })
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            arrow_r.click();
        }, 2000);

    })

    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.cicle');
    // console.log(ul.children);
    console.log(ul.children.length);
    for (i = 0; i < ul.children.length; i++) {

        li = document.createElement('li');
        li.setAttribute('index', i);
        li.addEventListener('click', function() {
            for (i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            index = this.getAttribute('index');
            circle = num = index;
            animate(ul, -index * focusWidth);

        })
        ol.appendChild(li);
    }
    ol.children[0].className = 'current';

    //arrow
    var num = 0;
    var circle = 0;
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    flag = true;
    arrow_r.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            circle++;


            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    })


    arrow_l.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });


            circle--;

            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            circleChange();
        }

    })

    function circleChange() {
        for (i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }

        ol.children[circle].className = 'current';

    }

    var timer = setInterval(function() {
        arrow_r.click();
    }, 2000)


    var goBack = document.querySelector('.goBack');
    var main = document.querySelector('.jiadian');
    var mainTop = main.offsetTop;
    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= mainTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    })

    goBack.addEventListener('click', function() {
        // 里面的x和y 不跟单位的 直接写数字即可
        // window.scroll(0, 0);
        // 因为是窗口滚动 所以对象是window
        animate1(window, 0);
    });
    // 动画函数
    function animate1(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()

        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                // if (callback) {
                //     // 调用函数
                //     callback();
                // }
                callback && callback();
            }
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
            // obj.style.left = window.pageYOffset + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 15);
    }

    // tab栏切换开始
    var floor = this.document.querySelector('.floor');
    // console.log(floor.children);
    //for (x = 0; x < floor.children.length; x++) {
    var x = 0;
    console.log(floor.children[x]);

    var lis = floor.children[x].querySelector('ul').querySelectorAll('li');
    var items = floor.children[x].querySelectorAll('.item');



    for (i = 0; i < lis.length; i++) {
        lis[i].setAttribute('index', i);
        lis[i].onclick = function() {
            //1
            for (j = 0; j < lis.length; j++) {
                lis[j].querySelector('a').className = '';
            }
            this.querySelector('a').className = 'style_red';


            //2 

            for (k = 0; k < items.length; k++) {
                items[k].style.display = 'none'
            }
            index = this.getAttribute('index');
            items[index].style.display = 'block';
        }

    }
    // tab栏切换结束


    //}

    // fixedtool模块

    flag = true;

    function toggleTool() {
        var rec = $(".recommend").offset().top;
        if ($(document).scrollTop() >= rec) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        }
    }



    $(window).scroll(function() {
        toggleTool();
        if (flag) {
            $(".floor .w").each(function(i, dom) {
                if ($(window).scrollTop() >= $(dom).offset().top) {
                    console.log(i);
                    $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();

                }
            })
        }
    })

    $(".fixedtool li").click(function() {
        flag = false;

        var current = $(".floor .w").eq($(this).index()).offset().top;
        console.log($(".floor .w"));

        console.log(current);

        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;

        });
        $(this).addClass("current").siblings().removeClass();

    })





    $(function() {

        $("img").lazyload({ effect: "fadeIn" });
    });


})